<template>
	<view class="carouse_list_box">
		<view ref="list" class="carouse_list" :style="listStyle" @transitionend="onTransitionEnd">
			<view v-for="(item, index) in inviteList" :key="index" class="item_carouse">
				<view class="user_operate">
					用户
					<span style="color: #FF3F6E;">
						{{ item.name }}
					</span>
					{{ item.invitationStatus === 1 ? '已完成首单' : '已完成注册' }}
				</view>
				<view class="user_over">.......................</view>
				<view class="user_reward" style="">
					<span style="color: #FF3F6E;">
						{{ item.invitationStatus === 1 ? '现金' : '完单卡' }}
					</span>
					{{ item.invitationStatus === 1 ? '×3元' : '×3' }}
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		computed,
		onMounted,
		onBeforeUnmount
	} from 'vue'
	
	// 导入API
	import { GetInvitationRecordApi } from '@/api/modules/home.js'
	
	// 邀请列表
	const inviteList = ref([])

	const itemHeight = 40 // rpx
	const itemDuration = 1500 // ms

	const currentOffset = ref(0)
	const isTransitioning = ref(false)
	const list = ref(null)

	const listStyle = computed(() => ({
		transform: `translateY(-${currentOffset.value}rpx)`,
		transition: isTransitioning.value ? 'transform 0.5s ease' : 'none'
	}))

	let timer = null

	async function startTimer() {
		// 加一条判断 只有长度大于三才可以滚动
		if(inviteList.value.length <= 3) return
		
		timer = setInterval(() => {
			// 开始动画，把 currentOffset 推到 1 条高度
			isTransitioning.value = true
			currentOffset.value = itemHeight
		}, itemDuration)
	}

	function onTransitionEnd() {
		if (!isTransitioning.value) return
		// 动画跑完后，把首项搬到尾部
		const first = inviteList.value.shift()
		inviteList.value.push(first)
		// 立刻取消过渡、重置位移
		isTransitioning.value = false
		currentOffset.value = 0
	}

	onMounted(async () => {
		// 调用接口
		await getInvitationRecord()
		// 开始滚动
		await startTimer()
	})

	onBeforeUnmount(() => {
		clearInterval(timer)
	})
	
	// 获取老用户邀请新用户的明细
	const getInvitationRecord = async () =>{
		const parameter = {
			pageNo: 1,
			pageSize: 10, // 最多获取五十条
		}
		const res = await GetInvitationRecordApi(parameter)
		
		if(res.code !== 0) return
		
		inviteList.value = res.data
		
	}
</script>

<style scoped lang="scss">
	.carouse_list_box {
		width: 100%;
		height: 120rpx;
		/* 显示 3 条 */
		overflow: hidden;
		position: relative;

		.carouse_list {
			position: absolute;
			width: 100%;
			top: 0;
		}

		.item_carouse {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 40rpx;
			line-height: 40rpx;
			font-size: 28rpx;
			color: #202C3E;
			box-sizing: border-box;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			.user_operate{
				width: 54%;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.user_over{
				flex: 1;
				margin: 0 24rpx;
				white-space: nowrap;
				overflow: hidden;
			}
			.user_reward{
				width: 130rpx;
				text-align: left;
				white-space: nowrap;
			}
		}
	}
</style>